<template>
  <div class="wrapper main-container">
    <button @click="$router.push({ name: 'example1' })">实例1</button>
    <button @click="$router.push({ name: 'example2' })">实例2</button>
    <button @click="$router.push({ name: 'example3' })">实例3</button>
    <button @click="$router.push({ name: 'example4' })">实例4</button>
    <button @click="$router.push({ name: 'example5' })">实例5</button>
    <button @click="$router.push({ name: 'example6' })">实例6</button>
    <button @click="$router.push({ name: 'example7' })">实例7</button>
    <button @click="$router.push({ name: 'example8' })">实例8</button>
    <button @click="$router.push({ name: 'example9' })">实例9</button>
    <button @click="$router.push({ name: 'example10' })">实例10</button>
    <button @click="$router.push({ name: 'example11' })">实例11</button>
    <button @click="$router.push({ name: 'example12' })">实例12</button>
    <button @click="$router.push({ name: 'example13' })">实例13</button>
    <button @click="$router.push({ name: 'example14' })">实例14</button>
    <button @click="$router.push({ name: 'example15' })">实例15</button>
    <button @click="$router.push({ name: 'example16' })">实例16</button>
  </div>
</template>

<script>
export default {
  name: 'Main'
};
</script>

<style lang="scss" scoped>
.main-container {
  & > button {
    margin: 0 10px 10px 0;
    cursor: pointer;
  }
}
</style>
